<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  " style="align-items: center;">
			<view class="flex2  flex-sub   flex flex-wrap justify-start  " style="flex-direction: column;">
				<text class="text3 text-bold "> 题目列表</text>
			</view>
		</view>
		<view class="flex4   response  flex flex-wrap justify-center  ">
			<view class="flex5   response  flex flex-wrap justify-between  " v-for="(item,index) in activity_list"
				style="flex-direction: row;align-items: center;">
				<view class="flex7  flex-sub   flex flex-wrap justify-start  "
					style="flex-direction: column;align-content: space-between;">
					<text class="text8 response "> {{item.title}}</text>
					<text class="text14 text-grey text-sm ">
						{{timestampToDateString(item.start_date)}}到{{timestampToDateString(item.end_date)}}</text>
					<view class="flex9   response  flex flex-wrap justify-between  " style="align-items: center;">
						<text class="text-gray "> </text>
						<view class="flex11    flex flex-wrap justify-start  " style="align-items: center;">
							<text class="text12 round bg-yellow " @click="to_dati(item)"> {{btn_text}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'

	const db = uniCloud.database()
	let abu_answer_activity_db = db.collection('abu-answering-activity');


	export default {
		data() {
			return {
				activity_list: [],
				btn_text: "开始答题"
			};
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			await abu_answer_activity_db.get().then(res => {
				const activity_data = res.result.data;
				console.log(activity_data);
				this.activity_list = activity_data;
			})
			uni.hideLoading()
		},
		methods: {
			to_dati(item) {
				const currentTime = new Date().getTime(); // 获取当前时间戳

				if (!(currentTime >= item.start_date && currentTime <= item.end_date)) {
					uni.showToast({
						title: '不在时间范围之内',
						icon: 'none'
					});
					return
				}

				uni.navigateTo({
					url: "./dati?id=" + item._id
				})
			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			}


			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex2 {
		width: 69%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text3 {
		font-size: 36rpx;
	}

	.flex4 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture6 {
		width: 100%;
		height: 228rpx;
	}

	.flex7 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text8 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex9 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex11 {
		position: relative;
	}

	.text12 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex13 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture14 {
		width: 100%;
		height: 228rpx;
	}

	.flex15 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text16 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex17 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex19 {
		position: relative;
	}

	.text20 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex21 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture22 {
		width: 100%;
		height: 228rpx;
	}

	.flex23 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text24 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex25 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex27 {
		position: relative;
	}

	.text28 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
</style>